<template>
  <div class="resource-support">
    <div class="top-image fullscreen-top"></div>
<div class="list">
  <div class="item">
    <span class="item-text">支撑保障</span>
    <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
  </div>
</div>

  <PageNav :navList="navList" />
  <TitleBox title="支撑保障" subtitle="SUPPORT AND RESOURCES" />

    <div class="unit-grid">
      <div v-for="unit in siteResources" :key="unit.id" class="unit-card">
        <div class="unit-header">
          <h3>{{ unit.unitName }}</h3>
          <span class="unit-tag">{{ unit.type }}</span>
        </div>
        <div class="unit-body">
          <p class="unit-intro">{{ unit.introduction }}</p>

          <div class="unit-info">
            <p><i class="el-icon-location"></i> {{ unit.contactInfo }}</p>
          </div>

          <div class="unit-site">
            <div class="site-item">
              <span class="site-label">场地面积</span>
              <span class="site-value">{{ getResourceValue(unit.supportResources, '场地面积') }}</span>
            </div>
            <div class="site-item">
              <span class="site-label">用途</span>
              <span class="site-value">{{ getResourceValue(unit.supportResources, '用途') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listAffiliated } from '@/api/affiliatedSys/affiliated.js'
import PageNav from "@/components/views/PageNav.vue"
import TitleBox from "@/components/common/TitleBox.vue"
const siteResources = ref([])

const navList = [
  { label: "机构部门", path: "/support/organizationalStructure" },
  { label: "科研团队", path: "/support/talentExpertTeam" },
  { label: "支撑保障", path: "/support/resourceSupport" }
]

const getResourceValue = (resources, key) => {
  if (!resources) return ''
  let value = ''
  if (key === '场地面积') {
    const match = resources.match(/(\d+)平方米/)
    value = match ? `${match[1]} 平方米` : ''
  } else if (key === '用途') {
    value = resources.replace(/\([^)]+\)/, '').replace(/\d+平方米/, '').trim()
  }
  return value
}

const fetchUnit = async () => {
  const res = await listAffiliated({})
  siteResources.value = res.rows
}

onMounted(fetchUnit)
</script>

<style scoped>
.resource-support {
  background: #fffdfc;
  min-height: 100vh;
}

/* 顶部图片区域 */
.top-image {
  width: 100%;
  height: 260px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.2);
}

.list {
  display: flex;
  align-items: center;
  position: relative; /* 确保 ::after 的绝对定位相对于它 */
  z-index: 0; /* 默认最底层 */
}

.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px; /* 可根据需要调整对齐方式 */
  width: 100%;
  height: 90px; /* 背景条高度，可调整 */
  background-color: #eae4e4;
  z-index: 0; /* 背景在最底层 */
}

.list .item {
  position: relative; /* 保持原来的布局 */
  display: inline-block;
  margin-top: -30px;
  z-index: 1; /* 图片和文字覆盖灰色背景 */
}

.list .item-icon {
  display: block;
  position: relative;
  z-index: 1; /* 图片在灰色背景上 */
}

.list .item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2; /* 文字在最上层 */
}




/* 网格布局 - 固定3列 */
.unit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定三列 */
  gap: 40px; /* 卡片间距 */
  padding: 40px 8%; /* 左右空白 */
  justify-items: center; /* 每列内容居中 */
}

/* 单个卡片 */
.unit-card {
  width: 95%; /* 占每列宽度的95%，避免太贴边 */
  max-width: 560px; /* 卡片最大宽度 */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-top: 5px solid #c92a2a;
  transition: all 0.3s ease;
}
.unit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(201, 42, 42, 0.15);
}
/* 卡片头部 */
.unit-header {
  padding: 20px;
  background: #fff5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unit-header h3 {
  font-size: 18px;
  color: #a4161a;
  margin-right: 0;
  white-space: nowrap; /* 禁止文字换行 */
  overflow: hidden;    /* 超出部分隐藏（可选，确保布局稳定） */
  text-overflow: ellipsis; /* 超出部分显示省略号（可选） */
}
.unit-tag {
  background: #c92a2a;
  color: #fff;
  font-size: 13px;
  padding: 3px 12px; /* 适当增加水平内边距，让文字更舒展 */
  border-radius: 20px;
  white-space: nowrap; 
  min-width: 55px; /* 保证最小宽度，防止挤压 */
}

/* 卡片主体 */
.unit-body {
  padding: 20px;
}
.unit-intro {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}
.unit-info p {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

/* 场地信息 */
.unit-site {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px dashed #eee;
  margin-top: 10px;
  padding-top: 10px;
}
.site-item {
  flex: 1 1 45%;
  margin-top: 10px;
}
.site-label {
  font-size: 13px;
  color: #999;
}
.site-value {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #5f5f5f;
  margin-top: 5px;
}
</style>
